<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>我的简历</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background: #eee;
      margin: 20px 0;
    }

    article {
      width: 21cm;
      min-height: 29.7cm;
      background: white;
      margin: 0 auto;
      overflow: auto;
      padding: 1em;
    }
  </style>
  <style media="print">
    body {
      margin: 0;
    }

    .page2 {
      page-break-before: always;
      margin-top: 30px;
    }
  </style>
  <style>
    body {}

    p {
      margin: .3em 0;
    }

    h1 {
      font-size: 25px;
      margin-top: 0;
    }

    h4,
    h5,
    h6 {
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    strong {
      font-weight: normal;
      color: #f60;
    }

    a {
      color: #999;
      text-decoration: none;
      border-bottom: 1px solid;
    }

    p,
    li {
      color: #666;
    }

    strong {
      font-weight: normal;
    }

    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }

    .bio {
      position: relative;
    }

    .bio img {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>

  <style>
    .projects {}

    .projects p {
      color: #666;
    }

    .projects strong {
      color: #f60;
    }

    .projects>ol {
      margin-top: 0;
      list-style-position: inside;
      padding: 0;
    }

    .projects>ol>li {
      margin-bottom: 24px;
    }

    .projects>ol>li>header {
      display: flex;
      justify-content: space-between;
    }

    .projects>ol>li h3 {
      display: inline-block;
    }
  </style>
  <style>
    .skills {}

    #skills {

      width: 500px;
      height: 270px;
    }
    @media print {
      #skills{display:none;}
    }

    .skills>.wrapper {
      display: flex;
      justify-content: space-between;
    }

    .skills>.wrapper>:first-child {
      margin-right: 24px;
    }

    .skills>.wrapper>ul {
      color: #666;
    }

    .skills>.wrapper strong {
      color: #f60;
    }

    .skills>.wrapper>ul>li {
      line-height: 1.2;
      margin-bottom: 8px;
    }
  </style>
  <style>
    .openSource header img {
      position: absolute;
      top: 0;
      right: 0;
    }

    .openSource>ul>li {
      margin-bottom: 24px;
    }

    .openSource header {
      position: relative;
      display: flex;
      justify-content: space-between;
    }
  </style>
  <style>
    .jobs>ol>li {
      margin: 12px 0;
    }

    .jobs header {
      display: flex;
      color: #666;
      margin-bottom: 12px;
    }

    .jobs header>h3 {
      font-size: 18px;
      color: #333;
    }

    .jobs header>h4 {
      margin-left: 1em;
      font-size: 18px;
    }

    .jobs header>span {
      font-size: 18px;
      margin-left: auto;
    }
  </style>



  <style>
    @media (max-width: 500px) {
      body {
        margin: 0;
      }

      article {
        width: auto;
        height: auto;
      }

      .bio img {
        display: none;
      }

      .skills .wrapper {
        flex-direction: column;
      }

      #skills {
        width: auto;
      }
      .jobs header{
        flex-direction: column;
      }
      .jobs header >h3,
      .jobs header >h4,
      .jobs header >span {
        margin: 0;
      }
    }
  </style>
</head>

<body>
  <article>
    <section class="bio">
        <h1>高振超</h1> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564768384,3788948434&fm=26&gp=0.jpg" alt=""
            width="100" height="100">
        <p> 男 | 21岁 | WEB前端开发实习生 | 大连 </p>
        <p> 手机：18904201315 | 微信：jiaoyuezzz | 邮箱：785276471@qq.com </p>
    </section>
    <section class="others">
      <h2>个人博客，Github</h2>
      <a class="othersa" href="http://www.gaozhenchao.cn/blog">自己搭建的个人博客(目前已有26篇文章)  |</a>
      <a class="othersa" href="https://github.com/Starlogzzz">我的 GitHub  |</a>
      <a class="othersa" href="http://gao_zhen_chao.gitee.io/mycv-webinternship/">本简历由html制作，预览地址</a>
  </section>
    <section class="projects">
        <section class="education">
            <h2>教育经历</h2>
            <p> <span><time>2017年</time>~<time>2021年</time></span> 大连交通大学 软件工程 本科 2021年6月毕业 </p>
        </section>
        <section class="skills">
          <h2>技能</h2>
          <div class="wrapper">
              <div id="skills"></div>
              <ul>
                  <li>熟练使用<strong>HTML、CSS、原生JS等技术</strong>，能独立分析和解决一些基础问题</li>
                  <li>熟悉 <strong>ES6</strong> ，包括 let / Promise / await / 解构赋值</li>
                  <li>掌握 <strong>Vue全家桶</strong>的使用，包括 VueCli、VueRouter、Vuex 等</li>
                  <li>掌握<strong>React</strong>，<strong>Redux</strong>，<strong>Hooks</strong> 使用方法 </li>
                  <li>了解 <strong>webpack</strong>打包工具，了解 <strong>Node.js</strong>, 掌握 <strong>Git</strong> 使用方法 </li>
              </ul>
          </div>
      </section>
        <h2>项目经历</h2>
        <ol>
            <!-- 项目1 -->
            <li>
                <header>
                    <h3>活力电商后台管理系统（admin，123456）</h3> <span> <a href="https://github.com/Starlogzzz/vue_shop">源码链接</a> <a href="http://120.53.125.40:1718/#/login">项目预览</a></span>
                </header>
                <p> 一款基于 <strong>Vue</strong> / <strong>Element UI</strong> / <strong>Axios</strong>  开发的 后台管理系统。
                </p>
                <p> 主要使用Element ui组件库进行开发，主要实现简单的进行数据交互,实现用户信息,商品信息的增删改查,用户权限
                  的分配等。 </p>
                <p> 这让我更深的掌握了Vue的开发方法。 </p>
            </li>
            <!-- 项目2 -->
            <li>
                <header>
                    <h3>Starlog-music</h3> <span> <a href="https://github.com/Starlogzzz/React-web-music">源码链接</a> <a href="http://120.53.125.40:7878/#/discover/recommend">项目预览</a></span>
                </header>
                <p> 这是一个基于 <strong>React</strong> 以及使用 <strong>Redux react-router hooks</strong> 开发的仿web版网易云音乐项目。<strong>（注意：本项目接口来自github开源接口，偶尔请求会请求不到数据，刷新即可）</strong> </p>
                <p> 主要完成了网易云音乐的首页制作，包括子路由的跳转，轮播图的展示，热门推荐等。并且完成了音乐播放功能，包括歌曲的切换(上一首，下一首)，播放模式的切换(顺序播放，随机播放，单曲循环)等，还可以在榜单中点击喜爱的歌曲添加到播放列表播放。 </p>
                <p> 本项目遵循组件化开发思想，单独功能模块全部抽离。使用redux进行状态管理，全面拥抱hooks。</p>
                <p> 制作本项目让我学习到了很多编程思想，尤其是组件化思想。并且让我掌握了react的使用方法。 </p>
            </li>
            <li class="page2">
              <header>
                  <h3>炫酷登录窗口</h3> <span> <a href="https://github.com/Starlogzzz/login-">源码链接</a> <a
                          href="http://gao_zhen_chao.gitee.io/login-/">项目预览</a> </span>
              </header>
              <p>这是我在学习 <strong>CSS3动画</strong>和<strong>jQuery</strong> 之后制作的一个登录窗口</p>
              <p>从此之后我喜爱上了各种新奇，有创意的设计，并加以练习。</p>
          </li>
        </ol>
    </section>
    <section class="openSource">
      <h2>个人优势</h2>
      <strong>有良好的学习自驱能力</strong> <br>
      <strong>责任心较强，有良好的团队协作精神</strong> <br>
      <strong>关注前端热点话题，经常逛知乎和掘金等开发者论坛</strong>
  </section>
    
    
</article>
  <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  <script src="./main.js"></script>
</body>

</html>
